@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}



#generalizeopen{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
     z-index: 999;
     display: none;
     
     
}

.generalizebg{
    width: 100%;
        height: r(616);
        background: #FFFFFF;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 9990;
        transition: all 1s linear 300ms;
        animation: explain 1s ease-in-out forwards;
         
     @keyframes explain{
         0%{transform: translateY(r(446));-webkit-transform: translateY(r(446));opacity: 0.2;}
          100%{transform: translateY(r(0));-webkit-transform: translateY(r(0));opacity: 1;}
     }
        a{
            display: inline-block;
            width: 100%;
            height: r(98);
            border-top: r(1) solid #CCCCCC;
            text-align: center;
            line-height: r(98);
        }
    .generalizecontent{
        width: 90%;
        margin: 0 auto;
        
        .icon_share{
            width: 33.3%;
            float: left;
            .shareimg{
                width: r(105);
                height: r(105);
                margin: r(20) auto r(20) auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                text-align: center;
                font-size: r(23);
            }
        }
    }
}
html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    >header {
        width: 100%;
        height: r(86);
        position: absolute;
        top: 0;
        background: #f7f7f7;
        margin: 0 auto;
        border-bottom: r(1) solid #c1c1c1;
        .set {
            float: left;
            line-height: r(86);
            padding-left: r(30);
            img {
                width: r(40);
                height: r(40);
            }
        }
        .nav {
            width: 100%;
            height: r(86);
            line-height: r(86);
            text-align: center;
            p {
                font-size: r(35);
                color: #333333;
            }
        }
        .letter {
            float: right;
            line-height: r(86);
            padding-right: r(32);
            position: relative;
            img {
                width: r(40);
                height: r(40);
            }
        }
        .letter:after {
            content: "";
            position: absolute;
            right: r(23);
            top: r(13);
            width: r(10);
            height: r(10);
            border-radius: 50%;
            background: #cc3333;
        }
    }
    >section {
        width: 100%;
        position: absolute;
        top: r(86);
        bottom: r(99);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .top {
            width: 100%;
            height: r(280);
            background: url(../img/bg.jpg);
            background-size: r(640) r(280);
            .head {
                padding-left: r(30);
                padding-top: r(30);
                .left {
                    width: r(130);
                    height: r(130);
                    border: r(5) solid #bca5c2;
                    border-radius: 50%;
                    margin-right: r(22);
                    img {
                        width: r(120);
                        height: r(120);
                        border-radius: 50%;
                    }
                }
                .right {
                    p {
                        font-size: r(35);
                        color: #FFFFFF;
                    }
                    p:last-child {
                        width: r(458);
                        text-align: right;
                        font-size: r(24);
                        padding-right: r(20);
                        a {
                            color: #FFFFFF;
                        }
                    }
                }
            }
            .foot {
                height: r(90);
                padding: r(10) r(20);
                margin-top: r(20);
                .collection {
                    width: r(200);
                    height: r(90);
                    padding-top: r(10);
                    text-align: center;
                    a {
                        p {
                            font-size: r(24);
                            color: #FFFFFF;
                        }
                    }
                }
                .shop {
                    p:first-child {
                        position: relative;
                    }
                    p:first-child:after {
                        content: "";
                        position: absolute;
                        right: r(75);
                        top: r(0);
                        width: r(8);
                        height: r(8);
                        border: r(1) solid #e1dbdd;
                        border-radius: 50%;
                        background: #cc3333;
                    }
                }
            }
        }
        .hr {
            width: 100%;
            height: r(32);
            background: #f3f4f6;
            border-top: r(1) solid #e3e3e3;
            border-bottom: r(1) solid #e3e3e3;
        }
        .type {
            width: 100%;
            height: r(90);
            line-height: r(50);
            padding: r(20);
            border-bottom: r(1) solid #e3e3e3;
            .left {
                .img {
                    width: r(45);
                    height: r(45);
                    background: #f06292;
                    line-height: r(45);
                    text-align: center;
                    border-radius: r(10);
                    margin-right: r(21);
                    img {
                        width: r(38);
                        height: r(32);
                    }
                }
                p {
                    font-size: r(28);
                    color: #333333;
                }
            }
            >p {
                font-size: r(24);
                color: #cccccc;
                span {
                    height: r(50);
                    vertical-align: middle;
                }
                a {
                    font-size: r(50);
                    color: #a8a9ab;
                    vertical-align: middle;
                }
            }
        }
        .t1 {
            border-bottom: 0;
            .left {
                .img {
                    background: #83cf50;
                }
            }
        }
        .t2 {
            .left {
                .img {
                    background: #39b7ec;
                }
            }
        }
        .t3 {
            border-bottom: 0;
            .left {
                .img {
                    background: #39b7ec;
                }
            }
        }
        .wait {
            width: 100%;
            height: r(120);
            ul {
                li {
                    width: 25%;
                    height: r(120);
                    text-align: center;
                    padding-top: r(20);
                    position: relative;
                    a {
                        img {
                            width: r(45);
                            height: r(37);
                        }
                        p {
                            font-size: r(24);
                            color: #999999;
                        }
                        span{
                            position: absolute;
                            top: r(13);
                            right: r(48);
                            display: inline-block;
                            width: r(22);
                            height: r(22);
                            background: #cc3333;
                            border-radius: 50%;
                            font-size: r(15);
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
    >footer {
        width: 100%;
        height: r(99);
        position: absolute;
        bottom: 0;
        background: #fefefe;
        ul {
            li {
                width: 25%;
                height: 100%;
                text-align: center;
                padding-top: r(10);
                position: relative;
                a {
                    img {
                        width: r(49);
                        height: r(45);
                    }
                    span{
                            position: absolute;
                            top: r(8);
                            right: r(48);
                            display: inline-block;
                            width: r(22);
                            height: r(22);
                            background: #cc3333;
                            border-radius: 50%;
                            font-size: r(15);
                            color: #FFFFFF;
                        }
                    p {
                        font-size: r(20);
                        color: #333333;
                    }
                }
            }
        }
    }
}